/**
 * Created by xukj on 2018/6/8.
 */
import React from 'react';
import {
  StyleSheet,
} from 'react-native';
import ImageButton from './ImageButton';
import PropTypes from 'prop-types';
import Colors from '../constants/Colors';
import Swiper from 'react-native-swiper';

export default class AdBanner extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
    }
  }

  render() {
    console.log('banner render');
    const {data, onPress} = this.props;
    return (
      <Swiper
        autoplay={true}
        paginationStyle={styles.paging}
        dotColor={Colors.gray01}
        activeDotColor={'white'}
      >
        {
          data.map((item, index) => {
            return (
              <ImageButton
                key={index}
                source={{uri: item.uri}}
                containerStyle={styles.image}
                onPress={() => {
                  onPress(item, index);
                }}
              />
            );
          })
        }
      </Swiper>
    );
  }
}

AdBanner.propTypes = {
  data: PropTypes.array,
  onPress: PropTypes.func,
};

const styles = StyleSheet.create({
  image: {
    flex: 1,
    backgroundColor: Colors.gray04
  },
  paging: {
    bottom: 4,
  },
});